<template>
  <view class="home">
 <search></search>
 <!-- 轮播图 -->
 <view class="swiper-box">
  <swiper class="swiper" 
  circular 
  :indicator-dots="indicatorDots"
   :autoplay="autoplay" 
   :interval="interval"
	:duration="duration">
				<swiper-item v-for="item in swiperList" :key="item.goods_id">
					<navigator :url="item.navigator_url" class="swiper-item ">
						<image :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
 </view>
 <!-- 导航区域 -->
 <view class="nav">
  <template v-for="item in NavList" >
   <navigator 
	  v-if="item.navigator_url" 
		:key="item.image_src" 
		:url="item.navigator_url">
	<image
	:src="item.image_src"
	mode="widthFix"></image>
	 </navigator>

<image 
   v-else
	:key="item.image_src" 
	:src="item.image_src"
	mode="widthFix"></image>
	</template>

 </view>
 <!-- 楼层区域 -->
  <view class="m-floor">
      <view v-for="item in floorList" :key="item.floor_title.image_src" class="floor">
        <view class="floor-title">
          <image
            :src="item.floor_title.image_src"
            mode="widthFix"
          />
        </view>
        <view class="product-list">
          <navigator v-for="prod in item.product_list" 
		      :key="prod.name" 
			    :url="prod.navigator_url" 
					:open-type="prod.open_ype"
					hover-class="none">
            <image
              :src="prod.image_src"
              mode="heightFix"
            />
          </navigator>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
name:'Home',
 data() {
        return {
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
						swiperList:[],
						NavList:[],
						floorList:[]
        }
  },
  onLoad(){
    this.getSwiperList()
		this.getNavList()
		this.getFloorList()
  },
  methods:{
    async getSwiperList(){
      const res = await uni.$u.http.get('/home/swiperdata')
			this.swiperList = res.message
    },
		async getNavList(){
      const res = await uni.$u.http.get('/home/catitems')
			this.NavList = res.message
    },
		async getFloorList(){
      const res = await uni.$u.http.get('/home/floordata')
			this.floorList = res.message
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper {
		height: 340rpx;
	}
	.swiper-item {
		display: block;
		height: 100%;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper image{
	width: 100%;
	height: 100%;
}
.nav{
	display: flex;
	justify-content: space-evenly;
	margin: 20rpx 0 40rpx;
	image{
		width: 140rpx;
	}
}
.floor-title {
    image {
      width: 750rpx;
    }
  }
  .product-list {
    navigator {
      float: left;
      margin-left: 12rpx;
      margin-bottom: 10rpx;
      image {
        height: 188rpx;
      }
      &:nth-child(1) {
        image {
          height: 386rpx;
        }
      }
    }
  }
</style>